<style lang="scss" scoped>
.table-outline {
  background-color: #ffffff;
  padding: 5px 10px;
  width:100%;
  height:100%;
  overflow: auto;
}
.pda-table {
  //兼容pda
  max-height: 80vh;
  overflow: auto;
}
</style>
<template>
  <div class="table-outline" :class="G_IsMobile ? 'pda-table' : ''" v-if="show">
    <AtomSearchForm
      :config="query"
      :data="queryData"
      @handleSearch="handleSearch"
      @handleReset="handleReset"
    ></AtomSearchForm>
    <table-tools
      :tableSize="table.config.size"
      :tableFullscreen="tableFullscreen"
      :columns="table.columns"
      :selection="selection"
      :config="tools"
      @handleQuery="query.show=!query.show"
      @handleChangeTableSize="handleChangeTableSize"
      @handleFullscreen="handleFullscreen"
      @handleRefresh="handleRefresh"
      @handleCreate="handleCreate"
      @handleDeleteMultiple="handleDeleteMultiple"
      @handleDownload="handleDownload"
      @handleUpload="handleUpload"
      @changeColumnShow="changeColumnShow"
      @changeColumnSort="changeColumnSort"
    ></table-tools>
    <!-- <h3 v-if="tableTitle !=''">{{tableTitle}}</h3> -->
    <AtomBasicTable
      ref="table"
      :data="data"
      :columns="table.columns"
      :additionalAction="table.additionalAction"
      :config="table.config"
      @handleClick="handleClick"
      @handleDbClick="handleDbClick"
      @handleSortChange="handleSortChange"
      @handleSelect="handleSelect"
      @handleSelectCancel="handleSelectCancel"
      @handleSelectAll="handleSelectAll"
      @handleClearSelect="handleClearSelect"
      @handleEdit="handleEdit"
      @handleDelete="handleDelete"
      @handleDetail="handleDetail"
    ></AtomBasicTable>
    <table-navigation v-if="navigation.show"
      :pageSizeOpts="navigation.opts"
      :pageNavigation="navigation.page"
      @handleChangePage="handleChangePage"
      @handleChangePageSize="handleChangePageSize"
    ></table-navigation>
    <slot></slot>
    <!--  测试 开始 -->
    <!--      <model-editor v-if="drawer.show" :data="modelData"  :model-type="'entity'" :drawer="drawer" ></model-editor>-->
    <!--  测试 结束 -->
  </div>
</template>

<script>
import TableNavigation from "./table/table-navigation";
import TableTools from "./table/table-tools";
import {debounce} from 'lodash';
export default {
  name: "AtomTable",
  components: { TableTools, TableNavigation },
  data() {
    return {
      resizerObs:null,
      show: true,
      height:window.innerHeight - 410,
      tableSize: "default",
      tableFullscreen: false,
      selection: [],
      filter: {},
      modelData: {},
      drawer: {
        default: () => {
          return {
            show: false,
            type: "read", // edit || read || new
          };
        },
      },
    };
  },
  props: {
    tools: {
      default: () => {
        return {
          autoHeight:true,
          search: true,
          addButton: true,
          batchDeleteButton: true,
          downloadIcon: false,
          uploadIcon: false,
          uploadUrl: "/",
          tableSizeIcon: false,
          fullscreenIcon: false,
          refreshIcon: false,
          columnSettingIcon: false,
          checkColumnDisabled: true,
          navigation:true,
          action: true, // 操作
          additionalAction: false, // 新增自定义
        };
      },
    },
    navigation:{
      default: () => {
        return {};
      },
    },
    query:{
      default: () => {
        return {};
      },
    },
    queryData: {
      default: () => {
        return {};
      },
    },
    table: {
      default: () => {
        return {};
      },
    },
    data: {
      default: () => {
        return [];
      },
    },
  },
  computed:{
    defaultQueryConfig(){
      return {
        show:true,
        labelWidth:100,//label宽度
        labelPosition:'right',//label位置
        cols:3,//一行几列
        onlyRead:false,//是否只读
        collapse:false,
        columns:[],
        rules:{}
      }
    },
    defaultTableConfig(){
      return {
        config:{
            stripe: true, //条纹
            size: "default", //尺寸
            loading: false, //是否加载
            rowClassName: '', //行样式
            tableHeight: 'auto', //表高
            style: {},
            checkColumn:true,
            numberColumn:true,
            action:true,
            additionalAction:true,
            actionFn:(row,column,index,item)=>{return true;},
            additionalActionFn:(row,column,index,item)=>{return true;},
          },
          columns:[
            {
              key: 'name',
              title: '姓名',
              width: 'auto',
              align: 'center',
              show: true,
              config:{
                editor:{
                  type:'text'
                }
              }
            }
          ],
          additionalAction:{
            key: 'additionalAction',
            title: 'additionalAction',
            slot: 'additionalAction',
            width: 200,
            fixed:'right',
            align: 'center',
            buttons:[]
          },
          navigation:{
            opts:[10, 30, 50, 100],
            page:{ total: 0, pageSize: 10, pageNumber: 1 }
          },
      }
    },
    defaultToolsConfig(){
      return {
        addButton: true,
        batchDeleteButton: true,
        downloadIcon: false,
        uploadIcon: false,
        uploadUrl: "/",
        tableSizeIcon: false,
        fullscreenIcon: false,
        refreshIcon: false,
        columnSettingIcon: false,
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.changeColumnSort(0,this.table.columns)
      // this.resize();
      if(this.table.config.autoHeight){
        this.resizerObs = new ResizeObserver((entries) => {
          if (!entries || entries.length === 0) return; // 处理边界情况
          const { height: contentHeight } = entries[0].contentRect;
          if (contentHeight === undefined) return; // 异常处理
          // if(!!this.height&&Math.abs(this.height-contentHeight)<10) return;
          // debugger
          let height = contentHeight;
          // if(this.height) return;
          if(this.navigation.show == true){
            height = height-80;
          }else{
            height = height-45;
          }
          if(this.tableTitle){
            height=height-25
          }
          this.table.config.tableHeight = height;
        });
        this.resizerObs.observe(this.$el);
      }else{
        this.table.config.tableHeight = window.innerHeight - 410;
      }
      this.$emit('onload',this)
    });

  },
  methods: {
    resize(){
      let rect = this.$el.getBoundingClientRect();
      if(this.config.autoHeight){
          if (!rect) return; // 处理边界情况
          if (rect.height === undefined) return; // 异常处理
          let height = rect.height;
          if(this.config.navigation == undefined || this.config.navigation == true){
            height = height-138-80;
          }else{
            height = height-100-80;
          }
          if(!this.config.search){
            height=height+58
          }else{
            if(this.collapseFormItem.length>2){
              height = height-58
            }
          }
          if(this.tableTitle){
            height=height-25
          }
          this.height = height;
      }else{
        this.height = window.innerHeight - 410;
      }
    },
    handleChangePage(page) {
      this.navigation.page.pageNumber = page;
      this.$emit("loadPage", this.navigation.page, this.queryData);
    },
    // 切换每页条数
    handleChangePageSize(size) {
      this.navigation.page.pageNumber = 1;
      this.navigation.page.pageSize = size;
      this.$emit("loadPage", this.navigation.page, this.queryData);
    },
    handleEdit(row, index) {
      this.$emit("handleEdit", row, index);
    },
    handleDelete(row, index) {
      this.$emit("handleDelete", row, index);
    },
    handleDetail(row, index) {
      this.$emit("handleDetail", row, index);
    },
    handleClick(row, index) {
      this.$emit("handleClick", row, index);
    },
    handleDbClick(row, index) {
      this.$emit("handleDbClick", row, index);
    },
    handleSortChange(column, key, order) {},
    handleSelect(selection, row) {
      this.$emit("handleSelect", selection);
      this.selection = selection;
    },
    handleSelectCancel(selection, row) {
      this.$emit("handleSelect", selection);
      this.selection = selection;
    },
    handleSelectAll(selection) {
      this.$emit("handleSelect", selection);
      this.selection = selection;
    },
    handleClearSelect(selection) {
      this.$emit("handleSelect", selection);
      this.selection = selection;
    },

    handleChangeTableSize(size) {
      this.table.config.size = size;
    },
    // 表格全屏
    handleFullscreen() {
      this.tableFullscreen = this.G_Fullscreen(this.tableFullscreen, this.$el);
    },
    handleRefresh() {
      this.show = false;
      this.$nextTick(() => {
        this.show = true;
      });
    },
    handleDownload() {
      // this.$refs.table.download();
      this.G_Export(
        "The original data",
        this.table.columns.filter((item) => item.show === true),
        this.data
      );
    },
    handleUpload(file) {
      this.G_Upload(file, (res) => {
        this.data = res.data;
      });
    },
    handleCreate() {
      this.$emit("handleCreate");
    },
    handleDeleteMultiple() {
      this.$emit("handleDeleteMultiple", this.selection);
    },
    handleSearch(data, filter, filterStr) {
      console.log(data,filter,filterStr,"data,filter,filterStr");
      
      this.$emit("handleSearch", data,filter,filterStr);
    },
    handleReset(data,completeData,defaultData) {
      this.filter = {};
      this.$emit("handleReset",data,completeData,defaultData);
    },
    changeColumnShow(index) {
      this.table.columns[index].show = !this.table.columns[index].show;
      //解决列设置中显隐字段不好使
      // this.$refs.table.setFinalColumn();
    },
    changeColumnSort(index,columns){
      let sort = {
        asc:[],
        desc:[]
      };
      columns.map(item=>{
        if(item.sort==='asc'){
            sort.asc.push(item.key)
        }else{
          sort.desc.push(item.key)
        }
      })
      this.table.config.sort = sort;
      console.log(sort)
      this.$emit("handleColumnSort", sort)
    },
    setTableData(callback){
      this.$refs.table.setTableData(callback)
    }
  },
};
</script>
